<template>
  <div>
    <div class="top">
      <div v-if="myshare.length == 0">暂时没有分享的文章，赶快去转发文章吧</div>
      <div class="content-item" v-if="myshare.length != 0" v-for="item in myshare" :key="item.id">
        <div class="article-preview" @click="getArticle(item.articleId,item.userArticleId)">
          <div class="article-preview-avatar" :style="{ backgroundImage: 'url(' + item.imgUrl + ')' }"></div>
          <div class="article-preview-content">
            <div class="article-preview-title">《{{ item.title }}》</div>
            <div class="article-preview-info">
              <font class="info-font">{{ timestampToTime(item.createTime) }}</font>
              <font class="info-font">阅读{{ item.readCount }}次</font>
            </div>
          </div>
        </div>
      </div>
      <div class="wait" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <mt-spinner v-if="!end" type="snake" color="rgb(38, 162, 255)"></mt-spinner>
        <font v-if="end">我是有底线的—————————————————</font>
      </div>
    </div>
  </div>
</template>

<script>
import { Indicator } from 'mint-ui';
export default {
  name: 'myShare',
  data() {
    return {
      myshare: [],
      page: 1,
      busy: true,
      end: false,
      openid: ''
    };
  },
  created() {
    this.openid = localStorage.getItem('openId');
    this.searchInfo(false);
  },
  methods: {
    getArticle: function(aid,uaid) {
      Indicator.open({
        text: '加载中...',
        spinnerType: 'fading-circle'
      });
      this.$axios.get('article/getArticle',{
        params: { articleId: aid, userArticleId: uaid, openid: this.openid }
      })
      .then(res => {
        // console.log(res.data);
        Indicator.close();
        this.$router.push({
          path: '/articleDetail',
          query: { articleId: res.data.article.id, userArticleId: res.data.userArticleId, article: res.data.article }
        });
      })
      .catch(err => {
        console.log(err);
      });
      setTimeout(() => {
       Indicator.close()
       }, 10000)
    },
    loadMore: function() {
      this.busy = true; // 将无限滚动给禁用
      setTimeout(() => {
        this.page++; // 增加页数
        this.searchInfo(true);
      }, 500);
    },
    searchInfo(flag) {
      this.$axios
        .get('user/getShare', {
          params: {
            openid: this.openid,
            page: this.page
          }
        })
        .then(res => {
          if (flag) {
            for (let j = 0; j < res.data.length; j++) {
              this.myshare.push(res.data[j]);
            }
            if (res.data != false) {
              //还有数据
              this.busy = false;
              console.log('还有数据，开启busy');
            } else {
              this.busy = true; // 将无限滚动关闭
              this.page = 0; // 页数变为0
              this.end = true;
              console.log('没有数据，关闭busy');
            }
          } else {
            this.myshare = res.data;
            this.busy = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    timestampToTime: function(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '年';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
      var D = date.getDate() + '日 ';
      var h = date.getHours() + ':';
      var m = date.getMinutes();
      return Y + M + D + h + m;
    }
  }
};
</script>

<style scoped>
  .info-font{
    color: #999;
    size: 13px;
  }
.top {
  margin-bottom: 55px;
}

.content-item {
  position: relative;
  margin: 0 5px;
}

.article-preview {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 5px 0;
  background: #fff;
  border-bottom: 1px solid hsla(0, 0%, 92.9%, 0.5);
}

.article-preview-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-right: 5px;
}

.article-preview-info {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 7px;
}

.article-preview-avatar {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: contain;
  border-radius: 1px;
  width: 100px;
  height: 70px;
}

.wait {
  color: #2c3e50;
  font-size: 20px;
  margin-inline: 20px;
  margin-top: 10px;
}
</style>
